// focus -> 指令的名称 随便 focus 用的时候 v-focus
// inserted 指令的钩子函数 当前指令所在的元素插入到DOM树中的时候自动执行
// el -> 指令所在的元素 input->input
// binding可以拿到后面的数据
// 内置指令 v-bind v-on v-if v-show
export const focus = {
  inserted(el, binding) {
    el.focus()
  }
}

export const tab = {
  inserted(el, binding) {
    // 排他思想
    // dom列表是伪数组 Array.from把它变成真正的数组
    const list = Array.from(el.children)
    list.forEach(item => {
      item.onclick = function() {
        for (let i = 0; i < list.length; i++) {
          list[i].style.backgroundColor = ''
        }
        this.style.backgroundColor = 'red'
      }
    })
  }
}

// el就是img标签
// binding.value可以获取到图片的路径

// 什么时候用过自定义指令
// 1. 实现页面一打开，input自动获取焦点 el-focus
// 2. 后台接口图片路径有时候出错了，为了避免图片裂开了，所以我们搞一个自定义指令 v-imgerror，实现的效果如果路径错了就给一个默认图片路径

export const imgerror = {
  inserted(el, binding) {
    // console.log(binding)
    el.onerror = function() {
      this.src = binding.value
    }
  }
}

